<template>
  <div class="VideoContainer">
    <div class="video" v-for="item in VideoList"
         :key="item.id">
      <div style="width: 224px;height: 125px;position: relative" class="img">
        <img v-lazyload="item.cover[0]" width="224" height="125" alt="">
        <el-image lazy style="width: 30px;position: absolute;left: 10px" src="//rs.dance365.com/img/release_play@3x.fb313c4d.png" alt="here is play btn icon" class="play_icon"/>
      </div>
      <!--   视频信息    -->
      <div class="moment_detail" style="border-radius: 500px">
        <div class="card_detail">
          <div :title="item.title" class="title" style="cursor: pointer;">
            <div class="example" style="width: 224px; padding-top: 10px">
              <span>
                <button style="width:34px;background-color:#fff;border-radius:5px;">教程</button>
                {{item.title}}
              </span>
            </div>
          </div>
          <div class="viewCount" style="margin:30px 0 0 0px">
            <span style="font-size: 12px;color: #d8dbe6" class="num">
            222人浏览
            </span>
          </div>
          <div style="display: flex;width: 180px;justify-content: space-between">
            <span style="font-size: 12px;color: #d8dbe6" class="num">
            点赞{{item.num}}
            </span>
            <span style="font-size: 12px;color: #d8dbe6" class="num">
            评论{{item.initExposureNum}}
            </span>
            <span style="font-size: 12px;color: #d8dbe6" class="num">
            收藏{{item.algorithmSortValue}}
            </span>
          </div>
        </div>
      </div>
      <!--   视频的用户信息    -->
      <div class="creator_info" style="margin-top: 2px;">
        <div style="height: 40px;line-height: 40px;padding-top: 20px;position: relative">
          <img width="30" height="30" style="border-radius: 50%;margin-left: -234px" :src="item.creatorBackup.avatar">
          <span style="display: inline-block;position: absolute;top: 16px;left: 45px">{{item.creatorBackup.name.slice(1,6)}}</span>
          <span style="display: inline-block;position: absolute;top: 16px;left: 160px">11-17</span>
        </div>
      </div>
    </div>
    <div class="isLoad">
      <el-button @click="loadMode" v-show="isLoading">加载更多</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "InterestVideo",
});

</script>

<script lang="ts" setup>
import {onMounted, onUnmounted, ref, watch} from "vue";
import {reqGetVideoAsync} from "@/api/home";
import {ElMessage} from "element-plus";
import {throttle} from "lodash";
import {useRoute} from "vue-router";

// 获取路由
const route = useRoute()
// 视频数据
const VideoList = ref<any>([])
// 页数
const pageNum = ref<number>(0)
// 控制显示隐藏 加载更多按钮
let isLoading = ref<Boolean>(false)
// 获取首页推荐下的视频
const getVideo = async (pageNum:number,pageSize:number = 5)=>{
  try {
    const re = await reqGetVideoAsync(pageNum,pageSize)
    VideoList.value = re.data.content
  }catch (e) {
    ElMessage.error('获取视频失败')
  }
}
onMounted(()=>{
  getVideo(pageNum.value,)
})
// 监听页面到底部的回调
const scrollBottom = async ()=>{
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight;
  if (scrollTop + clientHeight >= scrollHeight) {
    console.log('到底啦')
    pageNum.value= pageNum.value + 1
    if (pageNum.value < 2) {
    const re = await reqGetVideoAsync(pageNum.value)
    VideoList.value = [...VideoList.value,...re.data.content]
    isLoading.value = false
    }
  }
}
// 初始化调用
onMounted(()=>{
  window.addEventListener('scroll',  throttle(scrollBottom,1000));
})
// 离开时销毁
onUnmounted(()=>{
  window.removeEventListener('scroll', scrollBottom) //页面离开后销毁监听事件
})
// 点击获取更多
const loadMode = async ()=>{
  const re = await reqGetVideoAsync(pageNum.value)
  VideoList.value = [...VideoList.value,...re.data.content]
  isLoading.value = false
}
watch(route,()=>{
  VideoList.value.reverse()
})
</script>

<style lang="scss" scoped>
.VideoContainer{
  width: 1200px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f5f7f9;
}
.video {
  width: 224px;
  height: 288px;
  margin-top: 20px;
  //background-color: pink;
  margin-bottom: 10px;
}
.play_icon{
  margin: 90px 160px 0 0;
}
.card_detail{
  background-color: #fff;
}
.creator_info{
  height: 68px;
  border-radius:4%;
  background-color: #fff;
}
span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.isLoad{
  width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
</style>
